<template>
    <div class="item">
      <div class="cover">
          <div class="playcount">
            <!-- <img class="playcount-img" src="@/assets/p0.png" alt="">{{item.playCount}} -->
          </div>
          <!-- <img class="cover-img" :src="item.coverImgUrl" alt=""> -->
      </div>
        <!-- <p>{{item.name}}</p> -->
    </div>
</template>

<script lang="ts">
    import { Component, Vue,Prop } from 'vue-property-decorator';   //

    @Component
    export default class Musics extends Vue {         //
        @Prop() data!:any;
    }
</script>

<style scoped>
.item{
    width:230px;
    font-size: 30px;
    position: relative;
  }
  .playcount-img{
    width:24px;
    height: 24px;
  }
  .cover-img{
    width:230px;
    height: 230px;
  }
  .playcount{
    position: absolute;
    right:0;
    top:5px;
    color:#fff;
  }
  .name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 2;
  }
</style>